<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/jquery-1.11.3.js"></script>
    <!--
    DOM操作的方法
    append 方法
    ofter 方法
    remove 方法
    detach方法
    -->
    <script>
        $(function (){
            $('#append').click(function (){
                $('#div1').append($('#span'));
            });

            $('#after').click(function (){
                $('#div2').after($('#div1'));
            });

            $('#empty').click(function (){
                $('#ul').empty();
            });

            var $btn;
            $('#remove').click(function (){
                //将会返回被删除元素
                $btn = $('#btn').remove();
            });

            $('#resume').click(function (){
                $('#ul').after($btn);
            });

        });
    </script>
</head>
<body>
<span style="background-color : blue;color: red;" id="span">SPAN</span>
<div id="div1" style="background-color: gray;">DIV1</div>
<div id="div2" style="background-color: green;">DIV2</div>
<ul id="ul">
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
</ul>
<input id="btn" type="button" value="删除我"/>
<form>
    <fieldset>
        <legend>内部插入节点(插入子节点)</legend>
        <input type="button" value="append" id="append"/>
    </fieldset>
</form>
<form>
    <fieldset>
        <legend>外部插入节点(插入兄弟节点)</legend>
        <input type="button" value="after" id="after"/>
    </fieldset>
</form>
<form>
    <fieldset>
        <legend>删除节点</legend>
        <input type="button" value="删除所有子节点" id="empty"/>
        <input type="button" value="删除节点" id="remove"/>
        <input type="button" value="恢复节点" id="resume"/>
    </fieldset>
</form>
</body>
</html>